<!DOCTYPE html>
<!-- 声明html5标准 -->
<html lang='zh'>
<!-- 这个主要是给搜索引擎看的，搜索引擎不会去判断该站点是中文站还是英文站，所以这句话就是让搜索引擎知道，你的站点是中文站
对html页面本身不会有影响,这些现在都是html规范，你的页面越规范，就越容易被收录 -->

<head>
    <meta charset='UTF-8'>
    <!-- 声明使用UTF-8 Unicode编码，UTF-8编码优先采用的编码 -->
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <!--  X-UA-Compatible是针对IE新加的一个设置 声明兼容到edge -->
    <meta name='viewport' content='width=device-width, initial-scale=no'>
    <!--width:可视区域的宽度，值可为数字或关键词device-width intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放 -->
    <title>vue请求</title>
    <!-- 引入vue.js -->
    <script src='./js/vue.js'></script>
    <!-- 引入 vue-resource.js-->
    <!-- 引入顺序问题，首先要引入vue.js 然后再引入vue-resouce; -->
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>

<body>
    <div id='root'>
        <img v-bind:src="item.coverFileUrl" alt="" v-for="(item,index) in classData" :key="index">
    </div>
    <script>
        let vue = new Vue({
            // 选择控制区域,通过选择器去选到他，工作中一般使用id选择器;
            el: '#root',
            // 数据储存位置
            data: {
                classData: null,
            },
            // 方法的储存位置
            methods: {},
            beforeCreate() {
                // let url = "http://wkt.myhope365.com"
                // // 调用 vue-resource 通过this就可以获取到， 
                // // get函数内参数：1：url 2：参数
                // // 当请求成功时会进入.then回调，
                // // 当不成功时会进入？catch

                // // 常见的HTTP状态码有哪些 ?
                // // 当浏览者访问一个网页时, 浏览者的浏览器会向网页所在服务器发出请求, 当浏览器接受并显示网页前, 此网页所在服务器都会返回一个包含HTTP状态码的信息头(server header)用以响应浏览器的请求
                // // HTTP状态码的英文为HTTP Status Code.下面是常见的HTTP状态码:
                // // 200 - 请求成功
                // // 301 - 资源(网页等)被永久转移到其他URL
                // // 404 - 请求额资源(网页等)不存在 自己的问题，地址可以拼接错误。 
                // // 500 - 内部服务器错误 
                // // this.$http.get(`${url}/weChat/applet/course/banner/list?number=1`).then(res => {
                // //     console.log(res)
                // // }).catch(err => {
                // //     console.log(err);
                // // })
                // // 第一个参数是url， 第二个参数为给后端传过去的参数。第三个参数 确定传给后端的参数类型。 
                // let obj = {
                //     type: 'free',
                //     pageNum: 1,
                //     pageSize: 10
                // }
                // // emulateJSON:true 把参数转化为表单格式。 
                // this.$http.post(`${url}/weChat/applet/course/list/type`, obj, { emulateJSON: true }).then(res => {
                //     this.classData = res.data.rows;
                // }).catch(err => {
                //     console.log(err)
                // })
            },
            created() {
                let url = "http://wkt.myhope365.com"
                // 调用 vue-resource 通过this就可以获取到， 
                // get函数内参数：1：url 2：参数
                // 当请求成功时会进入.then回调，
                // 当不成功时会进入？catch

                // 常见的HTTP状态码有哪些 ?
                // 当浏览者访问一个网页时, 浏览者的浏览器会向网页所在服务器发出请求, 当浏览器接受并显示网页前, 此网页所在服务器都会返回一个包含HTTP状态码的信息头(server header)用以响应浏览器的请求
                // HTTP状态码的英文为HTTP Status Code.下面是常见的HTTP状态码:
                // 200 - 请求成功
                // 301 - 资源(网页等)被永久转移到其他URL
                // 404 - 请求额资源(网页等)不存在 自己的问题，地址可以拼接错误。 
                // 500 - 内部服务器错误 
                // this.$http.get(`${url}/weChat/applet/course/banner/list?number=1`).then(res => {
                //     console.log(res)
                // }).catch(err => {
                //     console.log(err);
                // })
                // 第一个参数是url， 第二个参数为给后端传过去的参数。第三个参数 确定传给后端的参数类型。 
                let obj = {
                    type: 'free',
                    pageNum: 1,
                    pageSize: 10
                }
                // emulateJSON:true 把参数转化为表单格式。 
                this.$http.post(`${url}/weChat/applet/course/list/type1`, obj, { emulateJSON: true }).then(res => {
                    this.classData = res.data.rows;
                }).catch(err => {
                    console.log(err)
                })
            }
        })
    </script>
</body>

</html>